<template>
  <div class="pageAll" ref="userPage" :style="PageStyle">
    <Tabs type="card">
      <TabPane label="用户管理" name=""></TabPane>
    </Tabs>
    <div class="content">
      <Row>
        <Col span="2">
          <Button icon="md-add" @click="add" type="primary">新增</Button>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col span="6">关键字：<Input v-model="searchParams.key" placeholder="请输入关键字" clearable style="width: 60%"/>
        </Col>
        <Col span="6">
          <Button type="primary" icon="ios-search" @click="getData()">搜索</Button>
        </Col>
      </Row>
      <div class="tableComponents">
       <TableHelper ref="tableHelper" :action="actions.getUsers" :params="searchParams"
                     :columns="userColumns"></TableHelper>
      </div>
    </div>

    <Drawer width="720" :title="operationName" :closable="true" v-model="drawerValue">
      <Form ref="userDataNow" :model="userDataNow" :rules="userCheck">
        <Row>
          <Col span="12">
            <FormItem label="用户账号:" prop="account">
              <Input v-model="userDataNow.account" placeholder="请输入用户账号" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="用户密码:" prop="password">
              <Input v-model="userDataNow.password" type="password" placeholder="请输入用户密码" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="所属部门:" prop="deptId">
              <Select v-model="userDataNow.deptId" placeholder="请选择所属部门" style="width: 60%">
                <Option v-for="item in deptSelectList" :value="item.deptId" :key="item.deptId">{{item.name}}</Option>
              </Select>
            </FormItem> 
          </Col>
          <Col span="12">
            <FormItem label="所属角色:" prop="roleId">
              <Select v-model="userDataNow.roleId" placeholder="请选择所属角色" style="width: 60%">
                <Option v-for="item in roleSelectList" :value="item.roleId" :key="item.roleId">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="用户姓名:" prop="name">
              <Input v-model="userDataNow.name" placeholder="请输入用户姓名" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="用户状态:" prop="state">
              <Select v-model="userDataNow.state" placeholder="请选择用户状态" style="width: 60%">
                <Option v-for="item in userState" :value="item.state" :key="item.state">{{item.value}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Row>
        <Col span="2" offset="15">
          <Button icon="md-close" @click="drawerValue =false" type="warning">取消</Button>
        </Col>
        <Col span="2" offset="1">
          <Button icon="md-arrow-up" @click="subData()" type="success">提交</Button>
        </Col>
      </Row>
    </Drawer>
    
    <Drawer width="720" :title="checkName" :closable="true" v-model="drawerCheck">
      <Form ref="userDataNow" :model="userDataNow" :rules="userCheck">
        <Row>
          <Col span="12">
            <FormItem label="用户账号:" prop="account">
              {{userDataNow.account}}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="用户姓名:" prop="name">
              {{userDataNow.name}}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="所属部门:" prop="deptId">
              {{showSelectItems.deptSelectName}}
            </FormItem> 
          </Col>
          <Col span="12">
            <FormItem label="所属角色:" prop="roleId">
              {{showSelectItems.roleSelectName}}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="用户状态:" prop="state">
              <span v-if="showSelectItems.stateSelectName==0">禁用</span>
              <span v-else-if="showSelectItems.stateSelectName==1">启用</span>
              <span v-else>未知</span>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Row>
        <Col span="2" offset="19">
          <Button @click="drawerCheck =false" type="success">确定</Button>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>
<script>
  import TableHelper from "../../../components/table/TableHelper"
  import {requestPost} from "../../../utils/js/HttpUtil"
  import messageUtil from "../../../utils/js/MessageUtil"
  import token from "../../../utils/js/config/token"

  export default {
    components: {
      TableHelper
    },
    data() {
      return {
        operationName: "新增用户",
        checkName:"查看用户",
        deptSelectList:[],
        roleSelectList:[],
        userDataNow: {
          userId: 0,
          name: "",
          account: "",
          state:1,
          password:"",
          deptId:0,
          roleId:0,
          version: 0,
          token:""
        },
        showSelectItems:{
          roleSelectName:"",
          deptSelectName:"",
          stateSelectName:""
        },
        PageStyle: {
          height: ""
        },
        drawerValue: false,
        drawerCheck:false,
        searchParams: {
          key: ""
        },
        actions: {
          getUsers: "/system/user/getUsers",
          delUser: "/system/user/delUser",
          getUserById: "/system/user/getUserById",
          updateUser: "/system/user/updateUser",
          addUser: "/system/user/addUser",
          getDeptIdAndName:"/system/dept/getDeptIdAndName",
          getRoleIdAndNames:"/system/role/getRoleIdAndNames",
          getToken:"/system/safe/getReSubmitToken"
        },
        userState:[{
          state:0,
          value:"禁用"
        },{
          state:1,
          value:"启用"
        }],
        //用户校验
        userCheck:{
          account:[
            { required: true, message: '请输入用户账号', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '默认111111,修改时不填写则不修改', trigger: 'blur' }
          ],
          name:[
            { required: true, message: '请输入用户姓名', trigger: 'blur' }
          ],
          state:[
            { required: true, message: '请选择用户状态', trigger: 'blur' }
          ],
          deptId:[
            { required: true, message: '请选择所属部门', trigger: 'blur' }
          ],
          roleId:[
            { required: true, message: '请选择所属角色', trigger: 'blur' }
          ]
        },
        userColumns: [
          {
            title: '用户账号',
            render: (h, params) => {
              return h('span', params.row.account);
            }
          },
          {
            title: '用户姓名',
            render: (h, params) => {
              return h('span',params.row.name);
            }
          },
          {
            title: '用户状态',
            render: (h, params) => {
              if(params.row.state==0){
                return h('span','禁用');
              }else if(params.row.state==1){
                return h('span','启用');
              }else{
                return h('span','未知');
              }
            }
          },
          {
            title: '所属部门',
            render: (h, params) => {
              if(params.row.sysDeptList.length>0)
              {
                return h('span', params.row.sysDeptList[0].name);
              }else{
                return h('span','未设置');
              }
            }
          },
          {
            title: '所属角色',
            render: (h, params) => {
              if(params.row.sysRoleList.length>0)
              {
                return h('span', params.row.sysRoleList[0].name);
              }else{
                return h('span','未设置');
              }
            }
          },
          {
            title: '创建时间',
            render: (h, params) => {
              return h('span',params.row.createTime);
            }
          },
          {
            title: '操作',
            fixed: 'right',
            width:'200em',
            render: (h, params) => {
              return [
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.drawerCheck = true
                      this.getRowItem(params.row.userId)
                      this.showSelectItems.roleSelectName=params.row.sysRoleList[0].name
                      this.showSelectItems.deptSelectName=params.row.sysDeptList[0].name
                    }
                  }
                }, '查看'),
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.getRowItem(params.row.userId)
                      this.operationName = "修改用户"
                      this.drawerValue = true
                    }
                  }
                }, '编辑'),
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      messageUtil.confirm('确认删除？', () => {
                        requestPost(this.actions.delUser, {userId: params.row.userId}, (data) => {
                          messageUtil.message.success(data.message)
                          this.getData()
                        })
                      })
                    }
                  }
                }, '删除')
              ]
            }
          }
        ]
      }
    },
    methods: {
      getHeight() {
        this.PageStyle.height = window.innerHeight - 3.75 * 12 + 'px';
      },
      //编辑、查看，查询单条信息
      getRowItem(value){
        //获取下拉列表信息
        this.getDeptIdAndGetRoleId()
        //查询单个数据并设置值
        requestPost(this.actions.getUserById, {userId:value}, (data) => {
          //刷新数据
             this.userDataNow.userId=data.data.userId
             this.userDataNow.account=data.data.account
             this.userDataNow.password=data.data.password
             this.userDataNow.name=data.data.name
             this.userDataNow.state=data.data.state
             this.userDataNow.version=data.data.version
             
             this.showSelectItems.stateSelectName=data.data.state
             //所属部门
             if(data.data.sysDeptList.length<=0){
               this.userDataNow.deptId=0
             }else{
               this.userDataNow.deptId=data.data.sysDeptList[0].deptId
             }
             //所属角色
             if(data.data.sysRoleList.length<=0){
               this.userDataNow.roleId=0
             }else{
               this.userDataNow.roleId=data.data.sysRoleList[0].roleId
             }
        })
      },
      subData() {
        if(this.userDataNow.account==""
        ){
          messageUtil.message.error('账号不能为空')
        }else if(this.userDataNow.deptId==0||this.userDataNow.roleId==0){
          messageUtil.message.error('所属角色或所属部门不能为空')
        }
        else{
        if (this.userDataNow.userId == 0) {//代表新增
          this.userDataNow.token=token.token
          requestPost(this.actions.addUser, this.userDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.userDataNow.userId=0
            this.$refs['userDataNow'].resetFields()
            this.getData()
          })
        } else {//代表修改
          requestPost(this.actions.updateUser, this.userDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.userDataNow.userId=0
            this.$refs['userDataNow'].resetFields()
            this.getData()
          })
        }
        }
      },
      add() {
        //还原状态
        this.userDataNow.userId=0
        this.$refs['userDataNow'].resetFields()
        //重置标题
        this.operationName = "新增用户"
        //请求防止表单重复提交的接口
        this.getToken()
        //获取下拉列表信息
        this.getDeptIdAndGetRoleId()
        
        this.drawerValue = true
      },
      getData() {
        this.$refs.tableHelper.getData()
      },
      //获取所属部门和所属角色的下拉列表信息
      getDeptIdAndGetRoleId(value){
        requestPost(this.actions.getDeptIdAndName,{},(data)=>{
          this.deptSelectList=data.data
        })
        requestPost(this.actions.getRoleIdAndNames,{},(data)=>{
          this.roleSelectList=data.data
        })
      },
      getToken(){
         requestPost(this.actions.getToken,{}, (data) => {
             token.token=data.data
             this.userDataNow.token=token.token
         })
      }
    },
    created() {
      //window.addEventListener('resize', this.getHeight);
      this.getHeight()

    },
    mounted() {
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    }
  }
</script>
<style scoped="scoped">
  .pageAll {
    overflow: auto;
  }

  .content {
    padding-left: 2%;
    padding-right: 2%;
  }

</style>
